<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滑稽</title>
		<style>
			.w{
				width: 500px;
				height: 500px;
				background-color: #ffaa00;
				border-radius: 500px;
			}
			.z1{
				width: 100px;
				height: 100px;
				background-color: #ffaaff;
				border-radius: 100px;
				position: relative;
			left: 22px;
			top: 240px;
			transform: rotate(-45deg);
			}
			.z2{
				width: 100px;
				height: 100px;
				background-color: #ffaaff;
				border-radius: 100px;
				position: relative;
				left: 250px;
				top: 250px;
			}
			.s1{
				width: 130px;
				height: 25px;
				background-color: #ffffff;
				position: relative;
				left: 60px;
				top:-375px;
				border-radius: 100px 100px 100px 100px;

			}
			.s2{
				width: 25px;
				height: 25px;
				background-color: #000000;
				border-radius: 30px 30px;
			}
			.s3{
				width: 130px;
				height: 25px;
				background-color: #ffffff;
				position: relative;
				left: 312px;
				top:-400px;
				border-radius: 100px 100px 100px 100px;
			}
			.s4{
				width: 25px;
				height: 25px;
				background-color: #000000;
				border-radius: 30px 30px;
			}
			p{
				width: 340px;
				height: 250px;
				border-top: 10px solid black;
				border-radius: 50%;
				transform: rotate(180deg);	
						position: relative;
					top:-350px;
						left: 85px;;
			}
			
		</style>
	</head>
	<body>
		<div class="w">
			<div class="z1">
				<div class="z2"></div>
			</div>
		</div>
		<!-- 左眼 -->
			<div class="s1">
				<div class="s2"></div>
			</div>
			<!-- 右眼 -->
			<div class="s3">
				<div class="s4"></div>
			</div>
			<!-- 嘴 -->
			<p></p>
	</body>
</html>